<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="百度ip请求时间" name="baidu">
        <div class="filter-container">

          <el-select
              v-model="listQuery.date_time"
              style="width: 150px"
              class="filter-item"
              @change="handleFilter"
            >
              <el-option v-for="(item, index) in last7Days" :key="item" :label="item" :value="item" />
            </el-select>

          <el-button
          plain size="small"
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >搜索</el-button>

          <el-button
          plain size="small"
            v-waves
            class="filter-item btn"
            type="primary"
            icon="el-icon-refresh"
            @click="handleCancel"
          >重置</el-button>
          </div>
          <div>
          <span>总请求数量：{{total.sum}}  成功数量：{{ total.success_sum }}， 失败数量：{{ total.error_sum }} 失败率：{{(total.error_sum / total.sum * 100).toFixed(2) }} %</span>
          </div>
          <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          >

          <el-table-column label="类型" prop="type" align="center">
            <template slot-scope="{row}">
              <span>{{ type_title[row.type]}}</span> 
            </template>
          </el-table-column>

          <el-table-column label="请求花费时间(ms)"  prop="time" align="center"></el-table-column>

          <el-table-column label="请求数量" prop="sum" align="center"></el-table-column>

          <el-table-column label="占比" prop="sum_time" align="center">
            <template slot-scope="{row}">
              <span>{{ (row.sum / total.sum * 100).toFixed(2)}} %</span> 
            </template>
          </el-table-column>

          <el-table-column label="时间" min-width="100" align="center">
            <template slot-scope="{row}">
              <span>{{ row.create_time }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="用户退出时间/次数" name="userBack">
        <div class="filter-container">

            <el-select
                v-model="listQuery2.date"
                style="width: 150px"
                class="filter-item"
                @change="handleFilter2"
              >
                <el-option v-for="(item, index) in last7Days" :key="item" :label="item" :value="item" />
              </el-select>
              
              <el-input
                v-model="listQuery2.oaid"
                placeholder="请输入oaid"
                style="width: 120px;"
                class="filter-item"
              />
            <el-button
            plain size="small"
              v-waves
              class="filter-item"
              type="primary"
              icon="el-icon-search"
              @click="handleFilter2"
            >搜索</el-button>

            <el-button
            plain size="small"
              v-waves
              class="filter-item btn"
              type="primary"
              icon="el-icon-refresh"
              @click="handleCancel2"
            >重置</el-button>
            </div>

            <el-table
            :key="123"
            v-loading="listLoading"
            :data="user_back_list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            >
            <el-table-column label="oaid"  prop="oaid" align="center">
              <template slot-scope="{row}">
                <span>{{ row.oaid }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="包" prop="sum_time" align="center">
              <template slot-scope="{row}">
                <span>{{ pkgs[row.pkg] }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="brand"  prop="brand" align="center"></el-table-column>
            <el-table-column label="类型" prop="type_" align="center"></el-table-column>
            <el-table-column label="退出时间" prop="time_" align="center"></el-table-column>
            <el-table-column label="时间" min-width="100" align="center">
              <template slot-scope="{row}">
                <span>{{ row.create_time }}</span>
              </template>
            </el-table-column>
            </el-table>

            <pagination
              v-show="user_back_total > 0"
              :total="user_back_total"
              class="pageShow"
              :page.sync="listQuery2.page"
              :limit.sync="listQuery2.limit"
              @pagination="getUserBackList"
            />
      </el-tab-pane>

      <el-tab-pane label="获取广告配置花费的时间" name="advConfig">
        <div class="filter-container">

          <el-select
              v-model="listQuery3.date_time"
              style="width: 150px"
              class="filter-item"
              @change="handleFilter3"
            >
              <el-option v-for="(item, index) in last7Days" :key="item" :label="item" :value="item" />
            </el-select>

          <el-button
          plain size="small"
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter3"
          >搜索</el-button>

          <el-button
          plain size="small"
            v-waves
            class="filter-item btn"
            type="primary"
            icon="el-icon-refresh"
            @click="handleCancel3"
          >重置</el-button>
          </div>
          <div>
          </div>
          <el-table
          :key="1234"
          v-loading="listLoading"
          :data="adv_config_time_list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :default-sort = "{prop: 'sum', order: 'descending'}"
          >

          <el-table-column label="请求花费时间(ms)"  prop="time" align="center"></el-table-column>

          <el-table-column label="请求数量" sortable prop="sum" align="center"></el-table-column>

          <el-table-column label="占比" prop="sum_time" align="center">
            <template slot-scope="{row}">
              <span>{{ (row.sum / adv_config_time_total.sum * 100).toFixed(2)}} %</span> 
            </template>
          </el-table-column>

          <el-table-column label="时间" min-width="100" align="center">
            <template slot-scope="{row}">
              <span>{{ row.create_time }}</span>
            </template>
          </el-table-column>
          </el-table>
      </el-tab-pane>
    </el-tabs>
  
  </div>
</template>

<script>
import {
  getIpError,
  getPkgList,
  getUserBack,
  getAdvConfigTime
} from "@/api/adv_admin/config";
// import {
//   quickLogin,
// } from "@/api/admin/control";addProxyOrqudao
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import {brand1} from '@/utils/index'
export default {
  name: "Control",
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      activeName:'baidu',
      brand1,
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        date_time: "",
      },
      error_type: {},
      pkgs:{},
      last7Days:[],
      total: {
        error_sum: 0,
			  success_sum: 0,
        sum: 0
      },
      type_title: {
        '0': '请求成功',
        '1': '请求失败'
      },
      // 用户退出
      listQuery2: {
        page: 1,
        limit: 20,
        date: "",
        oaid: ""
      },
      user_back_list: [],
      user_back_total: 0,
      // 获取广告配置花的时间
      adv_config_time_list: [],
      listQuery3: {
        page: 1,
        limit: 20,
        date_time: ""
      }
    };
  },
  created() {
    this.getPkgs();
    this.get7Day()
    this.getList();
  //   this.setDialogWidth();
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.setDialogWidth();
      })();
    };
  },
  methods: {
    getPkgs(){
        getPkgList().then((res)=>{
          this.pkgs = res.DATA.list
        })
      },
    setDialogWidth() {
      const val = document.body.clientWidth;
      const def = 600; // 默认宽度
      if (val < def) {
        this.dialogWidth = "100%";
      } else {
        this.dialogWidth = def + "px";
      }
    },
    getList() {
      this.listLoading = true;
      getIpError(this.listQuery).then((response) => {
        this.list = response.DATA.list;
        this.total= response.DATA.total;
        this.total['sum'] = this.total.success_sum + this.total.error_sum
        this.listLoading = false;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleCancel(){
      this.listQuery = {
        page: 1,
        limit: 20,
        date_time: ""
      }
      this.getList()
    },
    get7Day(){
      // 获取当前日期
      const today = new Date();

      // 格式化为 YYYY-MM-DD
      const formatDate = (date) => {
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0');  // 月份从0开始
          const day = String(date.getDate()).padStart(2, '0');
          return `${year}-${month}-${day}`;
      };

      // 获取最近7天的日期
      const getLast7Days = () => {
          const dates = [];
          
          for (let i = 0; i < 7; i++) {
              // 创建一个新日期对象，避免直接修改原始 `today` 对象
              const date = new Date(today);
              date.setDate(today.getDate() - i);
              dates.push(formatDate(date)); // 格式化日期并存储
          }
          
          return dates;
      };

      // 获取最近7天的日期
      this.last7Days = getLast7Days();
      this.listQuery.date_time = this.last7Days[0]
      this.listQuery3.date_time = this.last7Days[0]
      //console.log(this.last7Days);  // 输出最近7天的日期，例如：["2024-11-11", "2024-11-10", "2024-11-09", "2024-11-08", "2024-11-07", "2024-11-06", "2024-11-05"]

    },
    // 用户退出次数
    getUserBackList() {
      this.listLoading = true;
      getUserBack(this.listQuery2).then((response) => {
        this.user_back_list = response.DATA.list;
        this.user_back_total= response.DATA.total;
        this.listLoading = false;
      });
    },
    handleFilter2() {
      this.listQuery2.page = 1;
      this.getUserBackList();
    },
    handleCancel2(){
      this.listQuery2 = {
        page: 1,
        limit: 20,
        date: "",
        oaid: ''
      }
      this.getUserBackList()
    },
    // 获取配置花的时间 getAdvConfigTime
    getAdvConfigTimeList() {
      this.listLoading = true;
      getAdvConfigTime(this.listQuery3).then((response) => {
        this.adv_config_time_list = response.DATA.list;
        this.adv_config_time_total = response.DATA.total
        this.listLoading = false;
      });
    },
    handleFilter3() {
      this.listQuery3.page = 1;
      this.getAdvConfigTimeList();
    },
    handleCancel3(){
      this.listQuery3 = {
        page: 1,
        limit: 20,
        date: ""
      }
      this.getAdvConfigTimeList()
    },
  },
};
</script>

<style lang="scss" scoped>
.show-pwd {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 16px;
  color: #ccc;
  cursor: pointer;
  user-select: none;
}
.push {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  margin-left: 5px;
}
.pageHidden {
  display: none;
}
.btn {
  margin-left: 0;
}
.fullwidth {
  width: 450px;
  margin-left: 50px;
}
@media (max-width: 550px) {
  .pageShow {
    display: none;
  }
  .pageHidden {
    display: block;
  }
  .fullwidth {
    width: 100%;
    margin-left: 0;
  }
}
</style>
